<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .clock-box {
            /* 父元素宽度依赖子元素撑开 */
            width: fit-content;
            margin: 50px auto;
            /* border: 1px dashed #333; */
            text-align: center;
            padding: 10px 20px;
        }

        .clock-box .clock-time {
            height: 40px;
            font-size: 28px;
            line-height: 40px;
            font-family: "clockicons";
        }

        /* 定义自定义字体 */
        @font-face {
            font-family: "clockicons";
            src: url(../font/clockicons.woff2);
        }
    </style>
</head>

<body>
    <div class="clock-box">
        <div class="clock-title">现在时间</div>
        <div class="clock-time">15:04:11</div>
        <div class="clock-date">2023年9月20日</div>
    </div>
</body>
<script>

    var clockTime = document.getElementsByClassName("clock-time")[0];
    var clockDate = document.getElementsByClassName("clock-date")[0];


    showTime();
    setInterval(showTime, 1000);

    function showTime() {
        var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();

        clockTime.innerText = `${beauty(hour)}:${beauty(min)}:${beauty(sec)}`;
        clockDate.innerText = `${year}年${month}月${beauty(day)}日`;
    }

    function beauty(num){
        return num < 10 ? "0" + num : num;
    }


</script>

</html>